<template>
  <div class="login">
    <h2>欢迎您，请登录</h2>
    <van-form @submit="onSubmit" class="txtbox">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" :disabled=disabled
        >登录</van-button
        >
      </div>
    </van-form>

    <div class="box">
      <div @click="goReg">还没有账号？去注册</div>
      <div>忘记密码</div>
    </div>
   
     <div class="p">
        <div><van-checkbox v-model="checked" icon-size="15" class="icon" @click="myclick"></van-checkbox></div>
         <section>已阅读并同意《用户服务协议》、《隐私政策》</section>
     </div>
  
   
  </div>
</template>

<script>

import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { Button } from "vant";
import { Checkbox, CheckboxGroup } from "vant";

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
      username: "",
      password: "",
      checked: false,
      disabled:true
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
        this.$store.dispatch("myLoginm/LINK_DATA_AA",{
          phone:this.username,
          pass:this.password
        })
        if(this.$store.state.myLoginm.user){
          this.$router.push("/index/home")
        }
    },
    goReg(){
      this.$router.push('/register')
    },
     myclick(){
        if (this.checked == true) {
        this.disabled = !this.disabled;
      } else {
         this.disabled=true
      }
    },
 
}
}
</script>

<style scoped lang="scss">
.login {
  padding: 5.5556rem 1.1111rem;
  h2 {
    margin-top: 1.1111rem;
    margin-left: 0.6667rem;
  }
  .txtbox {
    margin-top: 1.6667rem;
  }
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      font-size: 0.7778rem;
      color: rgb(8, 136, 216);
      padding: 0.5556rem;
    }
  }
  .p{
    font-size: .7222rem;
    margin-top: 16.6667rem;
    display: flex;
    .icon{
        margin-top: .1667rem;
    }
    section{
        margin-left: .2778rem;     
    }
  }
}
</style>